<template>
  <div class="quotation">
    <!-- 交易面板头部 -->
    <div class="quotation-header">
      <div class="user-info">
        <span class="user-item name" v-if="userinfo !== null">{{ userinfo.uName }}</span>
        <div class="handle-group" :class="{ lt37: lang === 'en' ? true : false }">
          <span class="btn btn-up" :title="$t('capital.forward')" @click="handleMoney(true)"></span>
          <span class="btn btn-down" :title="$t('capital.backward')" @click="handleMoney(false)"></span>
        </div>

        <el-carousel style="flex: 1; margin-top: 7px;" height="100%;" direction="vertical" ref="curlist"
          :autoplay="false">
          <el-carousel-item v-for="item in moneylist" :key="item.currencyId">
            <div>
              <span class="user-item">{{ $t('capital.currency') }}：{{ item.currencyId === 1 ? $t('menu.RMB') :
                (item.currencyId === 3 ? $t('menu.USD') : $t('menu.HKD')) }}</span>
              <!-- 资金权益 -->
              <!--<span class="user-item">-->
              <!--{{$t('capital.capitalinterest')}}：{{item.accountBalance}}</span>-->
              <span class="user-item">{{ $t('capital.capitalinterest') }}：{{ parseFloat(parseFloat(item.accountBalance)
                -
                parseFloat(item.frozenAmount) + parseFloat(item.floatPL)).toFixed(2) }}</span>
              <!-- 占用总保证金 -->
              <span class="user-item">{{ $t('capital.totalMargin') }}：{{ Number(item.occupationMargin) +
                Number(item.frozenAmount) }}</span>
              <!-- 冻结金额 -->
              <!-- <span class="user-item">{{$t('capital.frozenAmount')}}：{{item.frozenAmount}}</span>-->
              <!-- 可用资金 -->
              <span class="user-item">{{ $t('capital.enableBalance') }}：{{ parseFloat(parseFloat(item.accountBalance) -
                parseFloat(item.frozenAmount) + parseFloat(item.floatPL)
                - parseFloat(item.occupationMargin)).toFixed(2) }}</span>
              <!-- 平仓盈亏 -->
              <span class="user-item">{{ $t('capital.gainLoss') }}：{{ item.liquidatePL }}</span>
              <!-- 浮动盈亏 -->
              <span class="user-item">{{ $t('capital.floatyk') }}：{{ item.floatPL }}</span>
              <!-- 手续费 -->
              <span class="user-item">{{ $t('capital.shouxufei') }}：{{ item.handlingFee }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="btn-group">
        <span class="handle-btn minify" :title="$t('menu.mini')" @click="handleMinify"></span>
        <span class="handle-btn close" :title="$t('menu.close')" @click="diaVisible = true"></span>
      </div>
    </div>
    <!-- 交易面板主体 -->
    <div class="quotation-content">
      <!-- 左侧菜单 -->
      <div class="tkMenu">
        <ul class="list">
          <!-- 下单 -->
          <li class="list-item" :class="{ 'on': paneIndex === 1 }" @click="menuSwitch(1)">
            <div class="tkm_bg">F1</div>
            <span class="tkmLi">{{ $t("trade.placeOrder") }}</span>
          </li>
          <!-- 跟单 -->
          <li class="list-item" :class="{ 'on': paneIndex === 2 }" @click="menuSwitch(2)">
            <div class="tkm_bg">F2</div>
            <span class="tkmLi">{{ $t("trade.documentary") }}</span>
          </li>
          <!-- 当日委托 -->
          <li class="list-item" :class="{ 'on': paneIndex === 3 }" @click="menuSwitch(3)">
            <div class="tkm_bg">F3</div>
            <span class="tkmLi">{{ $t("trade.todayEntrust") }}</span>
          </li>
          <!-- 当日成交 -->
          <li class="list-item" :class="{ 'on': paneIndex === 4 }" @click="menuSwitch(4)">
            <div class="tkm_bg">F4</div>
            <span class="tkmLi">{{ $t("trade.deal") }}</span>
          </li>
          <!-- 资金状况 -->
          <li class="list-item" :class="{ 'on': paneIndex === 5 }" @click="menuSwitch(5)">
            <div class="tkm_bg">F5</div>
            <span class="tkmLi">{{ $t("trade.capital") }}</span>
          </li>
          <!-- 历史交易 -->
          <li class="list-item" :class="{ 'on': paneIndex === 6 }" @click="menuSwitch(6)">
            <div class="tkm_bg">F6</div>
            <span class="tkmLi">{{ $t("trade.historicalRecords") }}</span>
          </li>
          <!-- 出入金 -->
          <li class="list-item" :class="{ 'on': paneIndex === 7 }" @click="menuSwitch(7)">
            <div class="tkm_bg">F7</div>
            <span class="tkmLi">{{ $t("trade.tradeFunds") }}</span>
          </li>
          <!-- 消息列表 -->
          <li class="list-item" :class="{ 'on': paneIndex === 9 }" @click="menuSwitch(9)">
            <div class="tkm_bg">F8</div>
            <span class="tkmLi">{{ $t("trade.msgList") }}</span>
          </li>
          <!-- 用户设置 -->
          <li class="list-item" :class="{ 'on': paneIndex === 8 }" @click="menuSwitch(8)">
            <div class="tkm_bg pwd">
              <svg-icon icon-class="config" />
            </div>
            <span class="tkmLi">{{ $t("trade.userSet") }}</span>
          </li>
        </ul>
      </div>
      <!-- 右侧内容 -->
      <div class="tkContent">
        <!-- 下单 -->
        <order v-show="paneIndex === 1" />
        <!-- 跟单 -->
        <documentary v-show="paneIndex === 2" />
        <!-- 当日委托 -->
        <commission v-show="paneIndex === 3" />
        <!-- 当日成交 -->
        <same-day v-show="paneIndex === 4" />
        <!-- 资金状况 -->
        <fund-status v-show="paneIndex === 5" />
        <!-- 历史交易 -->
        <historical-trade v-show="paneIndex === 6" />
        <!-- 出入金 -->
        <cash-out v-show="paneIndex === 7" />
        <!-- 用户设置 -->
        <change-pw v-if="paneIndex === 8" />
        <!-- 消息列表 -->
        <div class="message-list" v-show="paneIndex === 9">
          <table border="0" cellspacing="0" cellpadding="0" class="dTable">
            <thead>
              <tr>
                <th>{{ $t('trade.serial') }}</th>
                <th>{{ $t('trade.title') }}</th>
                <th>{{ $t('market.time') }}</th>
              </tr>
            </thead>
            <tbody>
              <!-- 无数据时展示 -->
              <tr v-if="messageList.length === 0" class="noneInfo">
                <td>{{ $t('msg.noData') }}</td>
              </tr>
              <!-- 数据列表 -->
              <tr v-else v-for="(item, index) in messageList" :class="{ active: index === msgIndex }"
                @click="switMsgTr(index)" @dblclick="showSysMsg(item.MsgID)" :key="item.MsgID">
                <td>{{ item.MsgID }}</td>
                <td>{{ item.Title }}</td>
                <td>{{ item.DateTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 交易面板底部 -->
    <div class="quotation-bottom"></div>
    <!-- 退出确认 -->
    <el-dialog :visible="diaVisible" width="28vw" top="25vh" :append-to-body="true" custom-class="tips-alert"
      @close="dialogClose">
      <div slot="title" class="dialog-title">{{ $t('tip.confirm') }}</div>
      <div class="dialog-content">
        <img class="dialog-icon" src="../../assets/img/dialog-sure.png" />
        <span class="dialog-msg">{{ $t('tip.exitUser') }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- 确认 -->
        <button class="confirm-btn btn-sure" @click="handleClose">
          <span>{{ $t('login.confirm') }}</span>
        </button>
        <!-- 取消 -->
        <div class="confirm-btn btn-cancel" @click.stop="dialogClose">
          <span>{{ $t('tip.cancel') }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import db from '../../../datastore'
import axios from "axios";
import Order from "./components/Order";
import Documentary from "./components/Documentary";
import SameDay from "./components/SameDay";
import Commission from "./components/Commission";
import FundStatus from "./components/FundStatus";
import HistoricalTrade from "./components/HistoricalTrade";
import CashOut from "./components/CashOut";
import ChangePw from "./components/ChangePw";
import {
  mapGetters
} from "vuex";
export default {
  name: "Quotation",
  components: {
    Order,
    Documentary,
    Commission,
    SameDay,
    FundStatus,
    HistoricalTrade,
    CashOut,
    ChangePw
  },
  computed: {
    ...mapGetters([
      "productlist"
    ]),
    userinfo() {
      return this.$store.getters.userinfo;
    },
    moneylist() {
      let temp_moneylist = this.$store.getters.moneylist.filter((e) => {
        return e.currencyId == 1;
      });
      return temp_moneylist;
    },
    floatPL() {
      return this.$store.getters.floatPL
    },
    pingYK() {
      return this.$store.getters.pingYK
    },
    lang() {
      return this.$store.getters.lang;
    },
    messageList() {
      return this.$store.getters.messageList;
    },
    paneIndex() {
      return this.$store.getters.paneIndex;
    }
  },
  watch: {
    productlist(val) {
      var data20 = val
      let list = []
      for (let i in data20) {
        let ARR = [];
        ARR.push(data20[i].MarketName);
        ARR.push(data20[i].Name);
        ARR.push(0);
        ARR.push(0);
        ARR.push(data20[i].ContractID)
        list.push(ARR);
      }
      this.list = list
      this.getList(this.userinfo.uId)
      immediate: true
    }
  },
  data() {
    return {
      list: [],
      nowMoney: {},
      diaVisible: false,
      msgIndex: -1,
      diskType: "2" // 默认模拟盘
    };
  },
  mounted() {
    // let uid = this.userinfo.uId
    // this.getList(uid)
  },
  created() {
    // 初始化实盘模拟盘
    let type = this.$db
      .read()
      .get("trades.diskType")
      .value();
    this.diskType = type;
  },
  methods: {
    // huoqu 合约设置
    getList(uid) {
      let nodeList = db
        .read()
        .get("trades.lineNode")
        .value();
      let phpzq = nodeList[2].url;
      let port = db.read().get("trades.port").value();
      axios.post(`${phpzq}${port}/index.php/findpoint`, {
        yh_id: uid,
        hy_id: ''
      }).then(res => {
        if (res.data.length == 0) {
          this.$store.dispatch('user/updateSetList', this.list)
        } else {
          // var data20 = this.productlist;
          let _list = this.list
          var listdate = res.data.data
          var newList = [];
          for (let i in _list) {
            for (let j = 0; j < listdate.length; j++) {
              if (_list[i][4] == listdate[j].hy_id) {
                _list[i][2] = Number(listdate[j].ying_float)
                _list[i][3] = Number(listdate[j].sun_float)
              }
            }
          }
          this.$store.dispatch('user/updateSetList', _list)
          // this.list = _list
        }
      })
    },
    menuSwitch(i) {
      this.$store.commit("panel/SET_PANEINDEX", i);
    },
    handleMinify() {
      // 仅改变面板打开状态为关闭
      //console.log("面板关闭");
      this.$store.dispatch("panel/isShowPanel", false);
      //迷你悬浮窗起效果
      this.$store.dispatch("panel/isShowMiniPanel", false);
    },
    handleClose() {
      // 清除用户信息，面板打开状态关闭
      this.$store.dispatch("user/logout");
      this.$store.dispatch("panel/isShowPanel", false);
    },
    handleMoney(type) {
      // 操作货币切换
      // console.log(this.moneylist)
      if (type) {
        this.$refs.curlist.prev();
      } else {
        this.$refs.curlist.next();
      }
    },
    dialogClose() {
      this.diaVisible = false;
    },
    switMsgTr(i) {
      this.msgIndex = i;
    },
    showSysMsg(id) {
      let that = this;
      let sendURl = `http://${this.userinfo.counterIP
        }:8088/churu/xinxi.php?bz=${this.diskType === "2" ? "0" : "1"}&id=${id}`;
      console.log(sendURl);
      axios.get(sendURl).then(res => {
        // console.log(res.data);
        that.$store.commit("user/SET_MSGHTML", res.data);
      });
    },
    clickMe() {
      this.$store.dispatch("bar/switchAlert", {
        msg: "点我",
        type: 1
      });
    }
  }
};
</script>

<style lang="scss">
.quotation {
  .el-carousel {
    .el-carousel__indicators {
      display: none;
    }
  }
}
</style>

<style lang="scss" scoped>
.quotation {
  height: 100%;
  position: relative;
  padding-top: 30px;
  padding-bottom: 20px;
  user-select: none;

  &-header {
    font-size: 12px;
    padding-left: 20px;
    background: #e8e8e8;
    color: #0f0f0f;
    line-height: 18px;
    height: 30px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .user-info {
      font-size: 0.96em;
      position: relative;
      height: 100%;
      flex: 1;
      display: flex;

      .user-item {
        margin-right: 6px;

        &.name {
          margin-right: 8px;
          line-height: 34px;
        }
      }

      .handle-group {
        margin-right: 6px;
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        border: 1px solid #7f9db9;
        border-radius: 3px;
        overflow: hidden;
        z-index: 32;

        &.lt37 {
          left: 37%;
        }

        .btn {
          background-color: #b7cffb;
          flex: 1;
          width: 30px;
          margin: 0;
          cursor: pointer;

          &.btn-up {
            background-image: url("../../assets/img/option.png");
            background-repeat: no-repeat;
            background-position: 10px 4px;
          }

          &.btn-down {
            background-image: url("../../assets/img/option.png");
            background-repeat: no-repeat;
            background-position: 10px -13px;
          }

          &:hover {
            background-color: #ddeffd;
          }
        }
      }
    }

    .btn-group {
      height: 100%;
      margin-right: 4px;
      display: flex;
      align-items: center;

      .handle-btn {
        width: 74px;
        height: 20px;
        background-repeat: no-repeat;
        background-position: center;

        // cursor: pointer;
        display: inline-block;

        &.minify {
          width: 27px;
          height: 25px;
          background-image: url(../../assets/img/win-min.png);
          color: #fff;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: top center;

          &:hover {
            background-image: url(../../assets/img/win-min-hover.png);
          }
        }

        &.close {
          width: 27px;
          height: 25px;
          margin-left: 5px;
          background-image: url("../../assets/img/win-close.png");
          color: #fff;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: top center;

          &:hover {
            background-image: url(../../assets/img/win-close-hover.png);
          }
        }
      }
    }
  }

  &-content {
    height: 100%;
    position: relative;
    width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    .tkMenu {
      border: 1px solid #a3b1b8;
      border-left: none;
      width: 130px;
      height: 100%;

      .list {
        position: relative;
        padding: 0px;
        margin: 0;
        margin-top: 10px;
        margin-left: 20px;

        &::before {
          position: absolute;
          left: -13px;
          bottom: 9px;
          width: 0px;
          content: "";
          top: 8px;
          border-left: 1px dashed #c9c9c9;
        }

        .list-item {
          list-style: none;
          font-size: 13px;
          position: relative;
          padding-left: 20px;
          line-height: 18px;
          color: #0f0f0f;
          cursor: pointer;
          margin-bottom: 6px;

          &::before {
            position: absolute;
            left: -12px;
            height: 0px;
            width: 12px;
            content: "";
            top: 8px;
            border-bottom: 1px dashed #c9c9c9;
          }

          .tkm_bg {
            position: absolute;
            left: 0px;
            width: 18px;
            height: 18px;
            line-height: 16px;
            background: linear-gradient(to bottom, #fff 0%, #e0dedf 100%);
            font-size: 12px;
            text-align: center;
            border: 1px solid #cecece;
            border-radius: 2px 0 0 2px;
            /* border-right: 0; */
            border-bottom: 1px solid #828282;

            &.pwd {
              font-size: 10px;
            }
          }

          .tkmLi {
            display: inline-block;
            padding: 0 1px;
            height: 18px;
          }

          &.on {
            .tkmLi {
              color: #fff;
              background: #3a6ea5;
            }
          }
        }
      }
    }

    .tkContent {
      position: relative;
      flex: 1;
      height: 100%;

      .message-list {
        height: 100%;
        border: 1px solid #b1bbc0;
        border-right: 0;
        margin-left: 2px;
      }
    }
  }

  &-bottom {
    background: url("../../assets/img/trade-bottom.jpg") repeat;
    height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}
</style>
